import React from 'react';
import './style.scss';
import SearchHeader from 'components/searchHeader';
import Swiper from 'components/swiper';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from 'actions/addName';
import { Picker, List } from 'antd-mobile';

class Home extends React.PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			data: [],
			value: [],
		};
	}
	componentDidMount() {
		console.log(this);
	}
	onPickerChange = val => {
		console.log(val);
	};
	onClick = () => {
		const data = [
			{ label: '2014', value: '2014' },
			{ label: '2015', value: '2015' },
			{ label: '2016', value: '2016' },
			{ label: '2017', value: '2017' },
			{ label: '2018', value: '2018' },
			{ label: '2019', value: '2019' },
			{ label: '2020', value: '2020' },
			{ label: '2021', value: '2021' },
		];
		this.setState({
			data: data,
		});
	};
	onOK = val => {
		console.log('ok');
		console.log(val);
	};
	render() {
		return (
			<div className="home-page page">
				<SearchHeader />
				<Swiper />
				<List style={{ backgroundColor: 'white' }} className="picker-list">
					<Picker
						// style={{ fontSize: '16px' }}
						data={this.state.data}
						cols={1}
						value={this.state.value}
						onPickerChange={this.onPickerChange}
						onOk={this.onOK}
						itemStyle={{ fontSize: '26px'}}
						indicatorStyle={{ fontSize: '26px' }}
					>
						<List.Item arrow="horizontal" onClick={this.onClick}>
							Multiple & async
						</List.Item>
					</Picker>
				</List>
			</div>
		);
	}
}

const mapStateToProps = state => {
	return {
		addName: state.addNameReducer,
	};
};
const mapDispatchToProps = dispatch => {
	return {
		action: bindActionCreators(actions, dispatch),
	};
};
export default connect(
	mapStateToProps,
	mapDispatchToProps
)(Home);
